<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    #include("/common/include/include.html")
    <script src="#(ctx)/common/js/demo/nifty-demo.js"></script>
    <script src="#(ctx)/common/plugins/morris-js/morris.min.js"></script>
    <script src="#(ctx)/common/plugins/morris-js/raphael-js/raphael.min.js"></script>
    <script src="#(ctx)/common/plugins/sparkline/jquery.sparkline.min.js"></script>
    <style>
        .lay-body{
            margin-top: 52px;
            overflow-y: auto;
            overflow-x: unset;
        }
        .lay-header{
            position: absolute;
            top: 0px;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="modal-dialog" style="width:100%">
    <div class="modal-content" style="height: 100%;">
        <div class="modal-header lay-header" style="height: 50px;">
            <button type="button" class="close" data-dismiss="modal" onclick="{parent.layer.closeAll();}"><i class="pci-cross pci-circle"></i></button>
            <h4 class="modal-title">#(name)</h4>
        </div>

        <div class="modal-body lay-body">
            <div id="page-content">
                <div class="col-sm-12 eq-box-sm">
                    <div class="panel ">
                        <div class="panel-body">
                            <table id="pageTable" class="demo-add-niftycheck"
                                   data-search="true"
                                   data-show-refresh="true"
                                   data-show-toggle="true"
                                   data-show-columns="true"
                                   data-sort-name="id"
                                   data-page-list="[5, 10, 15, 20,50,100]"
                                   data-page-size="5"
                                   data-pagination="true" data-show-pagination-switch="true" ></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    #set(extColList = extCol.split(","))
    var col = [
        {field: "#(otherValueCol.split(':')[0])", title: "#(otherValueCol.split(':')[1])",align: 'center'},
        {field: "#(otherLabelCol.split(':')[0])", title: "#(otherLabelCol.split(':')[1])",align: 'center'},
    #for(col:extColList)
        {field: "#(col.split(':')[0])", title: "#(col.split(':')[1])",align: 'center'},
    #end
        {
            field: 'control',
            title: '操作',
            align: 'left',
            width:'120',
            formatter:function(value,row,index){
                //通过formatter可以自定义列显示的内容
                //value：当前field的值，即id
                //row：当前行的数据
                var a = '<a class="label label-table label-success" onclick="selectThis(\''+row.#(otherValueCol.split(":")[0])+'\',\''+row.#(otherLabelCol.split(":")[0])+'\')" href="javascript:void(0);" >选择</a>&nbsp;';
                return a;
            }
        }];
    var opt = {
        //请求方法
        method: 'get',
        //是否显示行间隔色
        striped: true,
        //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        cache: false,
        //data-toolbar: "#demo-delete-row",
        //是否显示分页（*）
        pagination: true,
        //是否启用排序
        sortable: false,
        //排序方式
        sortOrder: "asc",
        //初始化加载第一页，默认第一页
        //我设置了这一项，但是貌似没起作用，而且我这默认是0,- -
        //pageNumber:1,
        //每页的记录行数（*）
        pageSize: 5,
        //可供选择的每页的行数（*）
        pageList: [5, 10, 15, 20,50,100],
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: ctx+"/admin/oa/common/business/selectBusinessPage",
        //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
        //queryParamsType:'',
        ////查询参数,每次调用是会带上这个参数，可自定义
        queryParams : function(params) {
            return {
                pageNumber: (params.offset/params.limit)+1,
                pageSize: params.limit,
                table:"#(table)",
                formNameCol:"#(formNameCol)",
                formValueCol:"#(formValueCol)",
                uuid:"#(uuid)"
            };
        },
        //分页方式：client客户端分页，server服务端分页（*）
        sidePagination: "server",
        //是否显示搜索
        search: false,
        //Enable the strict search.
        strictSearch: true,
        //Indicate which field is an identity field.
        idField : "id",
        columns: col,
        pagination:true,paginationShowPageGo: true
    };

    //表格
    function initTable(){
        $('#pageTable').bootstrapTable(opt);
        $('#pageTable').bootstrapTable('hideColumn', 'id');//隐藏
    }
    function refreshTable(){
        $("#pageTable").bootstrapTable('refresh', opt);
        $('#pageTable').bootstrapTable('hideColumn', 'id');
    }
    function selectThis(value,name){
        var data = {};
        data.#(otherValueCol.split(":")[0]) = value;
        data.#(otherLabelCol.split(":")[0]) = name;
        parent.callBackSelect_#(uuid)(data);
        parent.layer.closeAll();
    }

    $(document).ready(function() {
        //var clientH = document.body.clientHeight-131;
        var clientH = 496;
        $(".lay-body").css("height",clientH+"px");
        initTable();//初始化
    });
</script>
</body>
</html>